<template>
	<view>
		<view class="flex-row pd-20 search">
			<u-search searchIconSize="44" height="70" placeholder="输入关键字进行搜索" v-model="keyword" shape="square"
				@custom="getSearch" @change="getSearch">
			</u-search>
			<view class="flex-row row-center" @touchstart="streamRecord" @touchend="endStreamRecord">
				<u-icon name="mic" size="42" color="#2979ff"></u-icon>
			</view>
		</view>
		<view class="brandList">
			<scroll-view scroll-y="true" class="scroll" scroll-with-animation='true'>
				<view class="list" v-if="list.length > 0">
					<view class="item" v-for="(item, index) in list" :key="index">
						<view class="tips">{{item.name}}</view>
						<view class="brand" v-for="(itemn, indexn) in item.childCategoryList"
							@click="goUrl(itemn.cid, itemn.name)" :key="indexn">{{itemn.name}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	let plugin = requirePlugin("WechatSI");
	let manager = plugin.getRecordRecognitionManager();
	import {
		searchByKey
	} from "@/api/cus";
	export default {
		data() {
			return {
				cityCode: 0,
				list: [],
				keyword: ''
			}
		},

		onLoad(options) {
			let that = this;
			that.cityCode = options.cityCode || 0;
			if (!that.cityCode) {
				return this.$util.Tips({
					title: '请选择所在城市'
				}, {
					tab: 3
				});
			}

			that.initRecord();
		},

		onShow() {},

		methods: {

			/**
			 * 获取品牌搜索结果
			 */
			getSearch(e) {
				console.log(uni.getSystemInfoSync().statusBarHeight, uni.getSystemInfoSync().windowHeight)
				let that = this;
				uni.showLoading({
					mask: true,
					title: '搜索中'
				})
				searchByKey({
					key: e,
					cityCode: that.cityCode
				}).then(res => {
					uni.hideLoading();
					that.list = res.value;
				}).catch(err => {
					that.$util.Tips({
						title: err
					})
				})
			},

			/**
			 * 跳转门店列表
			 */
			goUrl(cid, name) {
				this.$util.Tips('/pages/merchants/goods/index?cid=' + cid + '&title=' + name)
			},

			/**
			 * 语音插件
			 */
			streamRecord() {
				let that = this;
				uni.getSetting({
					success(res) {
						if (res && res.authSetting && res.authSetting.hasOwnProperty('scope.record')) {
							if (res.authSetting['scope.record']) {
								manager.start({
									lang: 'zh_CN',
								});
							} else {
								uni.showModal({
									content: '检测到您还没打开麦克风，是否去设置打开？',
									confirmText: "确认",
									cancelText: "取消",
									success: function(res) {
										if (res.confirm) {
											uni.openSetting({
												success(res) {
													console.log(res);
													manager.start({
														lang: 'zh_CN',
													})
												}
											});
										}
									}
								})

							}
						} else {
							manager.start({
								lang: 'zh_CN',
							})
						}
					}
				});

			},

			/**
			 * 讲话结束
			 */
			endStreamRecord() {
				console.log('=======结束====')
				manager.stop()
			},

			/**
			 * 执行语音识别
			 */
			initRecord() {
				//有新的识别内容返回，则会调用此事件
				manager.onRecognize = (res) => {
					console.log(res);
					let text = res.result;
					this.keyword = text.replace("。", "");
				}
				// 识别结束事件
				manager.onStop = (res) => {
					console.log(res);
					let text = res.result;
					if (text == '') {
						console.log('没有说话');
						return;
					}
					this.keyword = text.replace("。", "");
				}
			},
		}
	}
</script>

<style>
	.pd-20 {
		padding: 20rpx;
	}

	.search {
		position: fixed;
		z-index: 999;
		width: 100%;
		box-sizing: border-box;
		background: #fff;
		height: 120rpx;
		top: 0;
		left: 0;
	}

	.brandList {
		margin-top: 120rpx;
	}

	.brandList .scroll {
		height: 100vh;
		overflow: hidden;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.brandList .list {
		font-size: 28rpx;
	}

	.brandList .list .item .tips {
		background-color: #f6f7f9;
		padding: 20rpx 20rpx;
	}

	.brandList .list .item .brand {
		font-size: 30rpx;
		padding: 30rpx 15rpx;
		margin: 0 15rpx;
		border-bottom: 1rpx solid #f6f6f6;
	}
</style>